<template>
  <div>
    <h1 style="text-align: center; font-size: 24px">历史接报列表</h1>

    <el-scrollbar height="550px">
      <div
        v-for="(report, index) in reportInfo"
        :key="index"
        class="scrollbar-demo-item"
        style="height: 245px;"
      >
      <p style="padding-top: 5px">
          <span style="margin-right: 40px">接报ID：{{ report.reportID }}</span>
          接报状态：<span :style="fontColorStyle(report)"
            >●{{ report.reportState }}</span
          >
        </p>
        <p>
          <span>接报名称：{{ report.reportName }}</span>
        </p>
        <p>
          <span>接报类型：{{ report.eventType }}</span>
        </p>
        <p>
          <span>报警人：{{ report.reporter }}</span>
          <span style="margin-left: 50px"
            >报警人电话：{{ report.reporterPhone }}</span
          >
        </p>
        <p>
          <span>报警时间：{{ formattedReportTime(report) }}</span>
        </p>
        <p>
          <span>最后更新者：{{ report.lastUpdater }}</span>
        </p>
        <p>
          <span
            >最后更新时间：{{ formattedLastUpdateTime(report) }}</span
          >
        </p>
        <p>
          <span>事件ID：{{ report.eventID }}</span>

          <span style="margin-left: 30px"
            >风险企业名称：{{ report.enterpriseName }}</span
          >
        </p>
        <br/><br/>
        <div>
          <el-button
            type="primary"
            class="button"
            plain
            @click="
              dialogInfo = true;
              display(report);
            "
            style="margin-left: 300px;"
            >查看详情</el-button
          >
        </div>
      </div>
    </el-scrollbar>

    <el-dialog
      v-model="dialogInfo"
      title="查看接报详情"
      width="90vw"
      :style="{ height: '800px' }"
    >
      <el-descriptions
        class="margin-top"
        :title="'接报ID：' + repoInfo.reportID"
        :column="1"
        size="default"
        border
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <tickets />
              </el-icon>
              事件类型
            </div>
          </template>
          <el-tag size="default">{{ repoInfo.eventType }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon><List /></el-icon>
              接报名称
            </div>
          </template>
          {{ repoInfo.reportName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon><InfoFilled /></el-icon>
              接报状态
            </div>
          </template>
          <div :style="fontColorStyle(repoInfo)" class="state">
            ●{{ repoInfo.reportState }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <user />
              </el-icon>
              报警人
            </div>
          </template>
          {{ repoInfo.reporter }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <iphone />
              </el-icon>
              报警人电话
            </div>
          </template>
          {{ repoInfo.reporterPhone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <location />
              </el-icon>
              报警时间
            </div>
          </template>
          {{ repoInfo.reportTime }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        class="margin-top"
        title="附加信息"
        :column="1"
        size="default"
      >
        <el-descriptions-item label="事件ID">{{
          repoInfo.eventID
        }}</el-descriptions-item>
        <el-descriptions-item label="事件名">{{
          repoInfo.eventName
        }}</el-descriptions-item>
        <el-descriptions-item label="工作人员备注">{{
          repoInfo.remark
        }}</el-descriptions-item>
        <el-descriptions-item label="事件等级">
          <el-tag size="default">{{ repoInfo.eventLevel }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="最后更新者">
          {{ repoInfo.lastUpdater }}
        </el-descriptions-item>
        <el-descriptions-item label="最后更新时间">
          {{ repoInfo.lastUpdateTime }}
        </el-descriptions-item>
        <el-descriptions-item label="风险企业名称">
          {{ repoInfo.enterpriseName }}
        </el-descriptions-item>
        <el-descriptions-item label="企业合法人">
          {{ repoInfo.legalPerson }}
        </el-descriptions-item>
        <el-descriptions-item label="企业合法人电话">
          {{ repoInfo.legalpersonphone }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>
    
  <script setup>
import { ref, inject, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { format, parseISO } from "date-fns";
import {
  Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  User,
  List,
  InfoFilled,
} from "@element-plus/icons-vue";

const router = useRouter();
const route = useRoute();
const axios = inject("axios");
const reportInfo = ref({});
const dialogInfo = ref(false);
const repoInfo = ref({});

const display = (report) => {
  axios
    .post("Specialist/getReportById", {
      reportID: report.reportID,
    })
    .then((response) => {
      repoInfo.value = response.data;
      console.log(repoInfo.value);
    })
    .catch((error) => {
      console.log(error);
    });
};
const formattedReportTime = computed(() => {
  return (report) => {
    // 如果 report.reportTime 是一个 Date 对象，则直接使用它
    // 否则，假设它是一个 ISO 格式的字符串，使用 parseISO 转换为 Date 对象
    const date =
      report.reportTime instanceof Date
        ? report.reportTime
        : parseISO(report.reportTime);
    // 将日期格式化为 "yyyy年MM月dd日"
    return format(date, "yyyy年MM月dd日 HH:mm:ss");
  };
});

const formattedLastUpdateTime = computed(() => {
  return (report) => {
    const date =
      report.lastUpdateTime instanceof Date
        ? report.lastUpdateTime
        : parseISO(report.lastUpdateTime);
    return format(date, "yyyy年MM月dd日 HH:mm:ss");
  };
});
const fontColors = ref({
  待审批: "blue",
  已驳回: "red",
  专家审批中: "rgb(3, 127, 36)",
  指挥人员审批中: "rgb(2, 164, 164)",
  审核通过: "green",
});

//computed用于声明响应式依赖的计算属性
const fontColorStyle = computed(() => {
  return (report) => ({
    color: fontColors.value[report.reportState] || "black",
  });
});

const init = async () => {
  await axios
    .post("Specialist/listAllReportExceptApprovalPending", {})
    .then((response) => {
      reportInfo.value = response.data;
      console.log(reportInfo.value);
    })
    .catch((error) => {
      console.log(error);
    });
};
init();
</script>
    
    <style scoped>
.scrollbar-demo-item {
  margin: 10px;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: rgb(63, 59, 59);
  margin-left: 1vw;
  position: relative;
}
p {
  margin-left: 2vw;
  margin-top: 1vw;
}
span{
  font-size: 15px;
}
.button {
  position: absolute;
  margin-top: -7vw;
  margin-left: 70vw;
}
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
.state {
  font-weight: bold;
}
</style>